<template>
  <div>
    <header>Todos</header>

    <h3>{{todo.title}}</h3>

    <div v-for="todo in todos">
      <h1>{{ todo.title }}</h1>
      <h1>{{ todo.checked }}</h1>
      <button @click="openTodo">Change</button>
      <button @click="openTodo">Delete</button>
      <br />
    </div>
  </div>
</template>

<script lang="ts">
import { getTodos, getTodo } from '../queries'
import type { TodoType } from './types'

export default {
  data() {
    return {
      todos: [] as TodoType[],
      todo: {} as TodoType
    }
  },

  apollo: {
    todos: getTodos(),
    todo: getTodo('')
  },
}
</script>

<style>

</style>
